<template>
    <div>
        <ve-table
        id="exportTable"
        fixed-header
        :max-height="tableHeight"
        :columns="newColumns"
        :table-data="tableData"
        rowKeyFieldName="index"
        :rowStyleOption="rowStyleOption"
        :clipboard-option="clipboardOption"
        :cell-style-option="cellStyleOption"
        :eventCustomOption="eventCustomOption"
        border-y
        border-x
        style="width:100%"
        :scroll-width="0"
        v-if="tableData.length > 0"
    />
    <noData showData v-if="tableData.length == 0"/>
    <AccountSetting :accountData="accountData" :visible="accountDialogVisible" @handleCloseLedger="handleCloseLedger"/>
    </div>
</template>
<script>
import AccountSetting from '../../base/AccountSetting.vue'
import noData from '@/components/base/noData.vue'
export default ({
    components:{AccountSetting,noData},
    props:{
        searchData:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        tableHeight:{
            type:String,
            default:'calc(100vh - 500px)'
        },
        tableTitleList:{
            type:Array,
            default:()=>{
                return []
            }
        },
        tableData:{
            type:Array,
            default:()=>{
                return []
            }
        }
    },
    data() {
        return{
            rowStyleOption: {
                clickHighlight: false,
                hoverHighlight: false,
            },
            clipboardOption:{
                copy: true,
                paste: false,
                cut: false,
                delete: false,
            },
            cellStyleOption: {
                bodyCellClass: ({ row, column, rowIndex }) => {
                    const keys = Object.keys(row)
                    const name = keys[keys.length - 1]
                    if (row[name] == '严重异常') {
                        return "table-body-cell-class3";
                    }
                    if (row[name] == '一般异常') {
                        return "table-body-cell-class2";
                    }
                    if (row[name] == '轻微异常') {
                        return "table-body-cell-class1";
                    }
                },
            },
            eventCustomOption:{
                bodyCellEvents:({row,column,rowIndex})=>{
                    return {
                        click: (event) => {
                            this.preview(row,column)
                        },
                    }
                }
            },
            accountData:{},
            accountDialogVisible:false
        }
    },
    computed:{
        newColumns(){
            let columns = [
                {
                    field: "index",
                    key: "index",
                    operationColumn: true,
                    title: "序号",
                    width: 50,
                    fixed: "left",
                },
                {
                    title: '指标/点名称',
                    field: 'pointName',
                    key: 'pointName',
                    width: 150,
                },
                {
                    title: '时间',
                    field: 'picktime',
                    key: 'picktime',
                    width: 150,
                    renderBodyCell:({row,column,rowIndex},h) =>{
                    return(
                        <span>
                        <span>{row['picktime']}</span>
                        </span>
                    )
                    }
                },
            ];

            if(this.tableTitleList.length > 0){
                this.tableTitleList.forEach(item=>{
                    columns.push({
                        title:item.title,
                        field:item.value,
                        key:item.value,
                        width: 150 ,
                        renderBodyCell:({row,column,rowIndex},h) =>{
                            if(item.title == '评判结果' || item.title == '评价结果'){
                                const value = row[item.value];
                            let tagType = '';
                            if (value === '正常' || value === 'A区') tagType = 'success';
                            else if (value === '轻微异常' || value === 'B区') tagType = '';
                            else if(value === '一般异常' || value === 'C区') tagType="warning"
                            else if (value === '严重异常' || value === 'D区') tagType = 'danger';

                            return h('el-tag', {
                                props: {
                                size: 'small',
                                type: tagType
                                }
                            }, value);
                            }else{
                                return (
                                    <span>{row[item.value]}</span>
                                )
                            }
                        }
                    })
                })
            }

            columns.push(
                {
                title:'审核人员',
                field:'chaeckuserName',
                key:'chaeckuserName',
                width:150,
                renderBodyCell: ({ row, column, rowIndex }, h) => {
                    return (
                        <div>
                            <i class="iconfont blueText smallIco" v-show={row.chaeckuserName}>&#xe60c;</i>
                            <span>{row.chaeckuserName}</span>
                        </div>
                    )
                }
                },
                {
                title: '操作',
                field: 'operate',
                key: 'operate',
                width: 150 ,
                renderBodyCell: ({ row, column, rowIndex }, h) => {
                    return (
                    <el-button type="text" on-click={() => this.handleAddLedger(row)} icon="el-icon-tickets">生成台帐</el-button>
                    );
                },
                },
            )

            return columns

        }
    },
    methods:{
        handleAddLedger(data){
            this.accountData = data
            this.accountDialogVisible = true
        },
        handleCloseLedger(){
            this.accountData = {}
            this.accountDialogVisible = false
        },
        preview(row,column) {
            this.$emit('tablePreview',row,column)
        }
    }
})
</script>
